/*
  学习目标：通过React基础知识，实现路径切换，界面切换
  1. 声明一个状态保存路径
  2. 逻辑判断，条件渲染
  3. 监听路由变化，存储状态 (window原生事件 hashchange )
*/

/* 
补充：
1. slice(start,end)的作用，截取字符串,start(默认是开头)代表开始截取的位置，end(默认是结束)代表截取结束的位置
2. #/home 为什么要有 #，原生的window.localtion中，有hash这个属性，也就是在url中#和它后面的部分，都是hash
    写成这样 #/home，等于是原生的 hash 变化，于是可以进入 hashchange 回调
3. 什么是单页应用 ---- vue2,vue3,react，所有的内容其实都是渲染到 index.html 的某个节点(例如 #app,#root)
    多页应用，指的是有很多个html,例如 index.html,header.html,footer.html,每次访问都是一个全新的html 
*/
import React from 'react';

export default class App extends React.Component {
  componentDidMount() {
    // hashchange 都是小写
    window.addEventListener('hashchange', () => {
      console.log('window.location -----> ', window.location);
      this.setState({ currentUrl: window.location.hash.slice(1) });
    });
  }
  state = {
    currentUrl: '/home',
  };

  render() {
    const { currentUrl } = this.state;
    return (
      <>
        <ul>
          <li>
            <a href="#/home">首页</a>
          </li>
          <li>
            <a href="#/my">音乐</a>
          </li>
          <li>
            <a href="#/friend">朋友</a>
          </li>
        </ul>
        {currentUrl === '/home' && <Home></Home>}
        {currentUrl === '/my' && <My></My>}
        {currentUrl === '/friend' && <Friend></Friend>}
      </>
    );
  }
}

function Home() {
  return <div>我是Home组件</div>;
}
function My() {
  return <div>我是My组件</div>;
}
function Friend() {
  return <div>我是Friend组件</div>;
}
